<template>
  <div class="app-container">

    <!-- 搜索区 -->
    <el-form :model="queryParam" ref="queryForm" size="small" :inline="true">
      <el-form-item label="账户名称" prop="loginName">
        <el-input v-model="queryParam.loginName" placeholder="请输入账户名称" clearable style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>


      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>


    <el-table :data="tableData.rows" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="loginName" label="账户" width="200" />
      <el-table-column label="性别" width="180">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.gender===1" type="primary">男</el-tag>
          <el-tag v-else type="success">女</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="状态" align="center"  width="180" >
        <template slot-scope="scope">
            <el-tag v-if="scope.row.gender===0" type="primary">正常</el-tag>
            <el-tag v-else type="danger">停用</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="头像" width="220">
        <template slot-scope="scope">
          <img :src="scope.row.avatar" width="150">
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center"  class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit"   >修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete">停用</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页条 -->
    <el-pagination v-if="tableData.total>0" :current-page="queryParam.page" :page-sizes="[1, 5, 10, 20,30,50,100]"
      :page-size="queryParam.size" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />


  </div>
</template>

<script>
  import {dataApi} from '@/api/employee.js'
  export default {
    data(){
      return {
        //查询条件对象
        queryParam:{
          page: 1,
          size: 10
        },
        //分页返回结果
        tableData: {
          total: 0,
          rows: []
        },
        //多选表格记录
        multipleSelection: []

      }
    },
    created(){
      this.fetchData()
    },
    methods: {
      // 点击搜索按扭
      handleQuery(){
        this.queryParam.page =1
        this.fetchData()
      },
      // 远程读取分页数据
      fetchData(){
        dataApi(this.queryParam).then( resp => {
          console.log(resp)
          this.tableData.total = resp.data.total
          this.tableData.rows= resp.data.list
        })
      },
      // 表格多选操作
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 每页多少笔变化
      handleSizeChange(val) {
        this.queryParam.page =1
        this.queryParam.size= val
        this.fetchData()
      },
      handleCurrentChange(val) {
         this.queryParam.page = val
         this.fetchData()
      }
    }
  }
</script>

<style>
</style>
